import React, {useEffect} from 'react';
import {View,} from '@tarojs/components';
import {ArrowDown, Plus, Minus} from "@taroify/icons"


import styles from './index.module.scss';
import {Checkbox, Image, Input, TextEllipsis} from "@taroify/core";

const Index: React.FC<any> = ({data: {primaryImage, title, specInfo, price}}) => {

    useEffect(() => {
        load();
    }, []);

    const load = async () => {
    }
    const specInfoString = specInfo.map(item => item.specValue).join(', ');

    return (
        <View className={styles.page}>
            <Checkbox></Checkbox>
            <Image className={styles.page_image} width={200} height={200} src={primaryImage}></Image>
            <View className={styles.page_body}>
                <View className={styles.page_body_top}>
                    <TextEllipsis className={styles.page_body_top_txt} rows={2}>{title}</TextEllipsis>
                </View>
                <View className={styles.page_body_center}>
                    <View className={styles.page_body_center_left}>
                        {specInfoString}
                    </View>
                    <View className={styles.page_body_center_right}>
                        <ArrowDown size={14}/>
                    </View>
                </View>
                <View className={styles.page_body_bottom}>
                    <View className={styles.page_body_bottom_left}>
                        ¥{price / 100}
                    </View>
                    <View className={styles.page_body_bottom_right}>
                        <Minus className={styles.page_body_bottom_right_icon}/>
                        <Input type="number" className={styles.page_body_bottom_right_input} value={"1"}></Input>
                        <Plus className={styles.page_body_bottom_right_icon}/>
                    </View>

                </View>
            </View>
        </View>
    );
};

export default Index;
